<script setup lang="ts">
import HSearch from "@/components/HSearch.vue";
import HTimePicker from "@/components/HTimePicker.vue";
import HButton from "@/components/HButton.vue";
import HTable from "@/components/HTable.vue";
import HDropdown from "@/components/HDropdown.vue";
</script>

<template>
  <div>
    <div class="shang">
      <HButton>考试</HButton>
<!--      <HSearch></HSearch>-->
<!--      <HTimePicker></HTimePicker>-->
      <div class="hang">
        <div class="zuo">搜索</div>
        <div class="you">
          <HSearch></HSearch>
        </div>
      </div>
      <div class="hang">
        <div class="zuo">
        </div>
        <div class="you">
          <el-row>
            <el-col :span="5">
              <HDropdown>角色选择</HDropdown>
            </el-col>
            <el-col :span="12">
              <HTimePicker></HTimePicker>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="hang">
        <div class="zuo"></div>
        <div class="you">
          <el-button>按序号顺序</el-button>
          <el-button>按时间顺序</el-button>
        </div>
      </div>
    </div>
    <div class="xia">
      下3434
      <HTable></HTable>
    </div>
  </div>
</template>

<style scoped lang="scss">
.shang{
  background-color: #FFFFFF;
  padding: 16px;
}
.xia{background-color: #FFFFFF}
.hang{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .zuo{
    margin-right: 6px;
    min-width: 5em;
  }
  .you{
    flex: 1;
  }
}
</style>